<style lang="scss" scoped>
.head-box {
  display: flex;
  width: 100%;
  padding: 0.2rem 0.3rem;
  background-color: #ffffff;
  .avatar {
    display: flex;
    flex-basis: 30%;
    align-items: center;
    justify-content: flex-start;
  }
  .infomation {
    display: flex;
    flex-basis: 50%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 0.2rem;
    font-size: 0.28rem;
    .name {
      font-size: 0.34rem;
      padding-bottom: 0.2rem;
    }
  }
  .edit {
    display: flex;
    flex-basis: 20%;
    align-items: center;
    justify-content: flex-end;
  }
}
.logout-box {
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 100%;
  padding: 0 .2rem;
}
</style>

<template>
  <div class="container hasNav hasTabbar">
    <van-nav-bar title="个人中心" fixed />
    <div class="head-box">
      <div class="avatar">
        <van-image width="1.6rem" height="1.6rem" :src="userInfo ? userInfo.user.headPic : ''" round></van-image>
      </div>
      <div class="infomation">
        <p class="name">{{ userInfo.user.username || '' }}</p>
        <p>用户账号：{{ userInfo.user.mobile || '' }}</p>
      </div>
      <div class="edit" @click="$router.push('/user/infos')">
        <van-icon name="arrow" size="0.3rem" />
      </div>
    </div>
    <van-cell icon="manager-o" title="认证中心" is-link to="/user/infos" />
    <van-cell icon="edit" title="修改密码" is-link to="/editPassword" />
	  <van-cell icon="manager-o" title="关于我们" is-link to="/common/about" />
    <div class="logout-box">
      <van-button type="default" color="#179AFE" block @click="logout">退出</van-button>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Tabbar from '@/components/Tabbar';

export default {
  name: 'UserIndex',
  components: {
    Tabbar
  },
  data() {
    return {

    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    logout(){
      this.$store.dispatch('handleLogout');
      this.$toast('退出成功');
      this.$router.replace('/');
    }
  }
};
</script>
